<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>商品选购</title>
    <link href="css/copy_common.css" rel="stylesheet" />
    <link href="css/copy_main.css" rel="stylesheet" />
    <link href="css/copy_reset.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/filter.css"/>
  </head>
  <body>
    <div class="box">
      <div class="headerBar">
        <div class="topBar">
          <div class="comWidth">
            <div class="leftArea">
              <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
              <span>欢迎来到慕课网</span>
              <a href="login.html">[登录]</a>
              <a href="register.html">[免费注册]</a>
            </div>
          </div>
        </div>
        <!--购物车区域-->
        <div class="logoBar">
          <div class="comWidth">
            <div class="logo fl">
              <a href="#"><img src="img/logo.png" alt="慕课网"></a>
            </div>
            <div class="search_box fl">
              <input type="text" class="search_text fl" />
              <input type="button" class="search_btn fr" value="搜索" />
            </div>
            <div class="shopCar fr">
              <span class="shopText fl">购物车</span>
              <span class="shopNum fl">0</span>
            </div>
          </div>
        </div>
        <!--导航区-->
        <div class="navBox">
          <div class="comWidth">
            <div class="shopClass fl">
              <h3>全部商品分类<i></i></h3>
            </div>
            <ul class="nav fl">
              <li>
                <a href="#" class="active">数码城</a>
              </li>
              <li>
                <a href="#">天嘿嘿</a>
              </li>
              <li>
                <a href="#">团购</a>
              </li>
              <li>
                <a href="#">发现</a>
              </li>
              <li>
                <a href="#">二手特卖</a>
              </li>
              <li>
                <a href="#" class="nobor">名品会</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <!--选购页面-->
     <div class="filter_boxs comWidth clearfix">
     	<div class="filer_leftarea clearfix">
     		 <h2>产品分类</h3>
     		 <h2>手机通讯</h3>
     		 	<ul class="phone_list">
     		 		<li><a href="#">手机</a></li>
     		 		<li><a href="#">对讲机</a></li>
     		 	</ul>
     		 	<h2>运营商</h2>
     		 	<ul class="sever_list">
     		 		<li><a href="#">购机送费</a></li>
     		 		<li><a href="#">"0"元购机</a></li>
     		 		<li><a href="#">选号入网</a></li>
     		 	</ul>
     		 	<h2>手机配件</h2>
     		 	<ul class="phone_puls">
     		 		<li><a href="#">手机电池</a></li>
     		 		<li><a href="#">蓝牙耳机</a></li>
     		 		<li><a href="#">充电器/数据线</a></li>
     		 		<li><a href="#">手机耳机</a></li>
     		 		<li><a href="#">手机贴膜</a></li>
     		 		<li><a href="#">手机存储卡</a></li>
     		 		<li><a href="#">手机保护套</a></li>
     		 		<li><a href="#">车载配件</a></li>
     		 		<li><a href="#">iPhone 配件</a></li>
     		 	</ul>
     		 	
     	</div>
     	<!--右侧区域-->
     	<div class="filer_rightarea clearfix">
     		<div class="filer_rightarea_top clearfix">
     			<div class="top-left">
     				<p class="top_list_title clearfix">手机</p>
     			  <p class="choose clearfix"><a href="#" class="current_active">不限</a></p>
     			</div>
     			<dl class="clearfix dl_list">
     				<dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			  <dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			</dl>
     		</div>
     		<hr />
     		<div class="filer_rightarea_top clearfix">
     			<div class="top-left">
     				<p class="top_list_title clearfix">手机</p>
     			  <p class="choose clearfix"><a  href="#">不限</a></p>
     			</div>
     			<dl class="clearfix dl_list">
     				<dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			  <dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     				<dd><a href="#" class="current_active">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			  <dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			</dl>
     		</div>
     		<hr />
     		<div class="filer_rightarea_top clearfix">
     			<div class="top-left">
     				<p class="top_list_title clearfix">手机</p>
     			  <p class="choose clearfix"><a class="current_active" href="#">不限</a></p>
     			</div>
     			<dl class="clearfix dl_list">
     				<dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			  <dd><a href="#">Samsung/三星</a></dd>
     				<dd><a href="#">Apple/苹果</a></dd>
     				<dd><a href="#">Huawei/华为</a></dd>
     			</dl>
     		</div>
     		<hr />
     		
     		<div class="more_choose clearfix">
     			<span class="more_choose-span">更多选择</span>
     			<form method="post" class="phnoe_cel">
					<select name="core_nums">
					<option >核心数</option>
					<option value="volvo">双核</option>
					<option value="saab">四核</option>
					<option value="fiat">八核</option>
					<option value="audi">十核</option>
					</select>
					<select name="phone_nums">
						<option value="volvo">手机像素</option>
					<option value="volvo">800万</option>
					<option value="saab">1200万</option>
					<option value="fiat">1600万</option>
					<option value="audi">1800万</option>
					</select>
					</form>
     		</div>
     		
     		<div class="rightArea_bom clearfix">
     			<div class="rightArea_bom-title clearfix">
     			<span class="lf">送至 ：</span>
     			<form method="post" class="lf">
					<select name="adress">
					<option >海淀区五环内</option>
					</select>
					</form>
					<span class="rf show_nums"> <input type="checkbox" />仅显示有货 共<b style="color: red;">212</b>件</span>
     			</div>
     			
     			<div class="imag_list clearfix">
     				<div class="img_items frist_bug">
      	 	 	 	<div class="img_area"><img src="img/shopImg.png"/></div>
      	 	 	 	<p><a href="#">小米 红米 3G(GSM/TD-SCDMA) 手机 灰色</a></p>
      	 	 	 	<p class="shop_price">￥699&nbsp;&nbsp;4886评论</p>
      	 	 	 	<p class="shop_img"><a href="#">加入购物车</a></p>
      	 	 	 </div>
     				<div class="img_items">
      	 	 	 	<div class="img_area"><img src="img/shopImg.png"/></div>
      	 	 	 	<p><a href="#">小米 红米 3G(GSM/TD-SCDMA) 手机 灰色</a></p>
      	 	 	 	<p class="shop_price">￥699&nbsp;&nbsp;4886评论</p>
      	 	 	 	<p class="shop_img"><a href="#">加入购物车</a></p>
      	 	 	 </div>
      	 	 	 	<div class="img_items">
      	 	 	 	<div class="img_area"><img src="img/shopImg.png"/></div>
      	 	 	 	<p><a href="#">小米 红米 3G(GSM/TD-SCDMA) 手机 灰色</a></p>
      	 	 	 	<p class="shop_price">￥699&nbsp;&nbsp;4886评论</p>
      	 	 	 	<p class="shop_img"><a href="#">加入购物车</a></p>
      	 	 	 </div>
      	 	 	 <div class="img_items">
      	 	 	 	<div class="img_area"><img src="img/shopImg.png"/></div>
      	 	 	 	<p><a href="#">小米 红米 3G(GSM/TD-SCDMA) 手机 灰色</a></p>
      	 	 	 	<p class="shop_price">￥699&nbsp;&nbsp;4886评论</p>
      	 	 	 	<p class="shop_img"><a href="#">加入购物车</a></p>
      	 	 	 </div>
      	 	 	 <div class="img_items">
      	 	 	 	<div class="img_area"><img src="img/shopImg.png"/></div>
      	 	 	 	<p><a href="#">小米 红米 3G(GSM/TD-SCDMA) 手机 灰色</a></p>
      	 	 	 	<p class="shop_price">￥699&nbsp;&nbsp;4886评论</p>
      	 	 	 	<p class="shop_img"><a href="#">加入购物车</a></p>
      	 	 	 </div>
      	 	 	 <div class="img_items">
      	 	 	 	<div class="img_area"><img src="img/shopImg.png"/></div>
      	 	 	 	<p><a href="#">小米 红米 3G(GSM/TD-SCDMA) 手机 灰色</a></p>
      	 	 	 	<p class="shop_price">￥699&nbsp;&nbsp;4886评论</p>
      	 	 	 	<p class="shop_img"><a href="#">加入购物车</a></p>
      	 	 	 </div>
     			</div>
     	
     			<div class="page">
     				<a href="#">上一页</a>
     				<a href="#">1</a>
     				<a href="#">2</a>
     				<a href="#">3</a>
     				<a href="#">4</a>
     				<a href="#">5</a>
     				<a href="#">6</a>
     				<span>&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;&nbsp; </span>
     				<a href="#">200</a>
     				<a href="#">下一页</a>
     				<span>共200页到第</span>
     				<input type="text" class="page_inpt"/>
     				<span>页</span>
     				<button>确定</button>
     			</div>
     		</div>
     		
     		
     		
     		
     		<!--右侧区域-->
     	</div>
     	
     	
     	
     	
     	<!--本页面地方-->
     </div>


      <!--底部区-->
      <div class="footer">
        <p>
          <a href="#">慕课简介</a>
          <i>|</i>
          <a href="#">慕课公告</a>
          <i>|</i>
          <a href="#">招纳贤士</a>
          <i>|</i>
          <a href="#">联系我们</a>
          <i>|</i>
          <a href="#">客服热线：400-675-1234</a>
        </p>
        <p>
          Copyright © 2006 - 2014 慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号 &nbsp;&nbsp;&nbsp;某市公安局龙潭分局备案编号：32432421231
        </p>
        <p class="web">
          <a href="#"><img src="img/webLogo.png" alt="logo"></a>
          <a href="#"><img src="img/webLogo.png" alt="logo"></a>
          <a href="#"><img src="img/webLogo.png" alt="logo"></a>
          <a href="#"><img src="img/webLogo.png" alt="logo"></a>
        </p>
      </div>
    </div>
  </body>
</html>